<template>
	<view class="" style="margin: 30rpx;">
		<view class="sd_box" v-if="intArr">
			<view class="sd_ft_box" style="display: flex; justify-content: space-between;">
				<view class="sd_ft_lt" style="display: flex;">
					<view class="sd_ft_lt_img" style="width: 100rpx; height: 100rpx;">
						<image src="@/static/image/mine.png" style="border-radius: 50%;" mode=""></image>
					</view>
					<view class="sd_ft_lt_sd" style="margin-left: 20rpx;">
						<view class="sd_ft_lt_sd_tit" style="font-weight: 900;">
							{{intArr.name}}
						</view>
						<view class="" style="color: #ccc;">
							{{intArr.gettime_text}}
						</view>
					</view>
				</view>
				<view :class="['rt_help', intArr?.state ? getBackgroundClass(intArr.state).color : '']">
					{{ intArr?.state ? getBackgroundClass(intArr.state).text : '' }}
				</view>
			</view>
			<view class="" v-if="intArr.size">
				<view class="kd_list">
					快递类型：{{intArr.size}}
				</view>
				<view class="kd_list" style="">
					快递数量：{{intArr.num}}
				</view>
				<view class="kd_list" style="">
					期望送达：{{intArr.qwsd}}
				</view>
				<view class="kd_list" style="">
					接单人性别：{{intArr.sex}}
				</view>
			</view>
			<view class="" style="padding: 10rpx; 0">
				{{intArr.need}}
			</view>
			<view class="address_qz" style="margin-top: 10rpx;" v-if="intArr.state">
				<view class="" style=" display: flex;" v-if="intArr.pickadd">
					<view class="add_ti" style="color: white; background-color: #2ab54b;">
						起
					</view>
					<view class="add_qi" style="color: #2ab54b; margin-left: 10rpx; margin-top: 5rpx;">
						{{intArr.pickadd}}
					</view>
				</view>
				<view class="" style=" margin-left: 20rpx; color: #ccc;"
					v-if="intArr.pickadd && intArr.address ||intArr.kdsj ">
					|
				</view>
				<view class="" style="display: flex; margin-top: 5rpx;" v-if="intArr.address || intArr.kdsj">
					<view class="add_ti" style="color: white; background-color: #3c91ff;">
						终
					</view>
					<view class="add_qi" style="color: #3c91ff; margin-left: 10rpx; margin-top: 5rpx;">
						{{intArr.address}}{{intArr.kdsj}}
					</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="kd_list" style="color: #3c91ff;">
					订单已完成，相关信息已隐藏
				</view>
			</view>
			<view class="" style="">
				<view class="" style="width: 100%; display: flex;justify-content:space-between; align-items: center;"
					v-if="intArr.getuser.id">
					<view class="" style="display: flex;">
						<view class="od_info" style="color: #3c91ff; background-color: #edf5ff;"
							@click="orderInfo(intArr?.getuser.mobile)">
							订单备注
						</view>
						<view class="od_info" style="color: #fec16a; background-color: #fff5e7; margin-left: 20rpx;"
							@click="tp_tk()">
							图片信息
						</view>
					</view>
					<image @click="makephone(intArr.user.mobile)" style="width: 80rpx; height: 80rpx; "
						src="@/static/image/phone_blue.png" mode=""></image>
				</view>
			</view>
			<view class="" style="display: flex; font-weight: 700; margin-top: 20rpx;" v-if="!intArr.djs.seconds == 0">
				将于
				<view class="" style="color: red;">
					{{`${intArr.djs.day}天${intArr.djs.hours}时${intArr.djs.minutes}分${intArr.djs.seconds}秒`}}
				</view>
				后自动退款
			</view>
		</view>
		<view class="" style="font-weight: 800; padding: 20rpx 0; text-align: center;" v-if="!intArr?.getuser.id">
			暂无接单人
		</view>
		<view class="" v-else>
			<view class="" style="font-weight: 800; padding: 20rpx 0;">
				接单人信息
			</view>
			<van-cell-group>
				<van-cell center="true">
					<view class="" slot="title" style="display: flex; ">
						<image style="width: 86rpx; height: 93rpx; border-radius: 50%;" :src="intArr?.getuser.avatar"
							mode="">
						</image>
						<view class="" style="display: flex; align-items: center; margin-left: 20rpx;">
							{{intArr?.getuser.name}}
						</view>
					</view>
					<view class="" slot="right-icon" style="display: flex;">
						<image @click="makephone(intArr?.getuser.mobile)"
							style="width: 80rpx; height: 80rpx; border-radius: 50%;" src="@/static/image/phone_blue.png"
							mode="" />
					</view>
				</van-cell>
			</van-cell-group>
		</view>
		<view class="" style="font-weight: 800; padding: 20rpx 0;">
			订单信息
		</view>
		<van-cell-group>
			<van-cell center="true">
				<view class="" slot="title" style="display: flex; ">
					<view class="" style="display: flex; align-items: center; margin-left: 20rpx; font-weight: 600;">
						订单号
					</view>
				</view>
				<view class="" slot="right-icon" style="display: flex;align-items: center;">
					<view class="" style="display: flex; align-items: center;">
						<view class="" style="margin-right: 10rpx;">
							{{intArr?.repnum}}
						</view>
						<image style="width: 31rpx; height: 32rpx;" src="https://paole.hebeixiaoyu.cn/run/profile/upload/fz.png" mode=""
							@click="copyText(intArr?.repnum)" />
					</view>
				</view>
			</van-cell>
			<!-- 接单时间 -->
			<!-- intArr.wxtime -->
			<view class="">
				<van-cell center="true">
					<view class="" slot="title" style="display: flex; ">
						<view class=""
							style="display: flex; align-items: center; margin-left: 20rpx; font-weight: 600;">
							支付时间
						</view>
					</view>
					<view class="" slot="right-icon" style="display: flex;align-items: center;">
						<view class="" style="display: flex; align-items: center;">
							<view class="time_sj" style="margin-right: 10rpx;">
								{{intArr?.wxtime_text}}
							</view>
						</view>
					</view>
				</van-cell>
				<van-cell center="true">
					<view class="" slot="title" style="display: flex; ">
						<view class=""
							style="display: flex; align-items: center; margin-left: 20rpx; font-weight: 600;">
							接单时间
						</view>
					</view>
					<view class="time_sj" slot="right-icon" style="display: flex;align-items: center;">
						<view class="" style="display: flex; align-items: center;">
							<view class="time_sj" style="margin-right: 10rpx;">
								{{intArr?.gettime_text}}
							</view>
						</view>
					</view>
				</van-cell>
				<van-cell center="true">
					<view class="" slot="title" style="display: flex; ">
						<view class=""
							style="display: flex; align-items: center; margin-left: 20rpx; font-weight: 600;">
							完成时间
						</view>
					</view>
					<view class="" slot="right-icon" style="display: flex;align-items: center;">
						<view class="" style="display: flex; align-items: center;">
							<view class="time_sj" style="margin-right: 10rpx;">
								{{intArr?.update_time_text}}
							</view>
						</view>
					</view>
				</van-cell>
			</view>
			<van-cell center="true">
				<view class="" slot="title" style="display: flex; ">
					<view class="" style="display: flex; align-items: center; margin-left: 20rpx; font-weight: 600;">
						联系管理员
					</view>
				</view>
				<view class="" slot="right-icon" style="display: flex;align-items: center;">
					<view class="" style="display: flex; align-items: center;">
						<view class="time_sj" style="margin-right: 10rpx;">
							联系校区管理员
						</view>
					</view>
				</view>
			</van-cell>
		</van-cell-group>
		<view class=""
			style="display: flex; justify-content: flex-end; align-items: center; height: 100%; margin-top: 20rpx;">
			<view style="display: flex; align-items: center;"> <!-- Wrapper -->
				<view class="" @click="order_back()"
					style="color:#3c91ff; font-size: 25rpx; padding: 10rpx; border: solid 1rpx #3c91ff; border-radius: 30rpx;">
					返回订单中心
				</view>
				<view class="rt_help" v-if="getBackgroundClass(intArr?.state)?.text == '待帮助'" @click="order_jd()"
					style="background-color: #3c91ff; color: white; margin-left: 20rpx; align-items: center; margin-bottom: 20rpx; margin-top: 20rpx;">
					接单
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
	} from 'vue';
	import {
		postorderDetail,
		getapplyOrder,
		getSetOrder
	} from "@/api/index.js"
	import {
		onShow,
		navigateTo,
		onLoad
	} from '@dcloudio/uni-app';
	const intArr = ref()
	const id = ref()
	const typeid = ref()
	const page = ref()
	const Ints = (id, typeid, page) => {
		postorderDetail({
			id,
			typeid,
			page
		}).then(res => {
			intArr.value = res.data
			console.log("我看看返回值", intArr.value);
		})
	}
	const getBackgroundClass = (state) => {
		let obj = {
			1: {
				color: 'bg-wait',
				text: '待帮助'
			},
			2: {
				color: 'bg-helped',
				text: '已帮助'
			},
			3: {
				color: 'bg-completed',
				text: '已完成'
			}
		}
		return obj[state]
	}
	const order_back = () => {
		uni.navigateBack()
	}
	const order_jd = () => {
		getSetOrder({
			id: id.value
		}).then(res => {
			uni.showToast({
				title:res.msg,
				icon:"none",
				success() {
					Ints(id.value, typeid.value, page.value)
				}
			})
			
		})
	}
	const makephone = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone
		});
	}
	const orderInfo = (phone) => {
		if (phone == uni.getStorageSync("userInfo").mobile) {
			uni.showToast({
				title: intArr.value.remake,
				icon: "none"
			})
		} else {
			uni.showToast({
				title: "订单备注仅接单员可见",
				icon: "none"
			})
		}
	}
	const tp_tk = (imgs) => {

		uni.previewImage({
			urls: intArr?.value.images_text
		})
	}
	const copyText = (text) => {
		uni.setClipboardData({
			data: text,
			success: function() {
				uni.showToast({
					title: '复制成功',
					duration: 1000
				});
			},
			fail: function(err) {
				uni.showToast({
					title: '复制失败',
					duration: 1000
				});
			}
		});
	}
	onLoad((e) => {
		id.value = e.id
		typeid.value = e.typeid
		page.value = e.page
		Ints(id.value, typeid.value, page.value)
	})
</script>


<style scoped>
	.ft_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		background-color: #3c91ff;
		padding: 20rpx 0;
		border-radius: 25rpx;
		margin-top: 10rpx;
	}

	.runner-item {
		color: white;
		padding: 10rpx 20rpx;
		margin: 5rpx;
		border-radius: 20rpx;
		cursor: pointer;

	}

	.runner-item.active {
		color: white;
		font-weight: 900;

	}

	.sd_box {
		/* Removed border */
		padding: 30rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #cccccc;
	}

	.rt_help {
		width: 160rpx;
		height: 60rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;

	}

	.bg-wait {
		background-color: #e9ffee;
		color: #38bb57;
	}

	.bg-helped {
		background-color: #edf5ff;
		color: #3c91ff;
	}

	.bg-completed {
		background-color: #fff5e7;
		color: #fea01d;
	}

	.add_ti {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.time_sj {
		color: #999;
	}

	.kd_list {
		padding: 10rpx 0;
	}

	.od_info {
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}
	::v-deep .van-cell--center {
		/* padding: 0; */
	}
</style>